<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col :span="14">
                <el-button  style="float: right" type="primary" @click="shuxin">
                    <template #icon>
                        <i-ep-search/>
                    </template>
                    刷新
                </el-button>
                <el-table v-adaptive="40" :border="true" :data="outpFeesMasterList" :header-cell-style="$headerCellStyle" :stripe="true"
                          highlight-current-row @row-click="rowClick">
                    <el-table-column :align="'center'" label="收费时间" prop="createTime" width="130">
                        <template #default="scope">
                              <span>{{
                                      $parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}")
                                  }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :align="'center'" label="收据号" min-width="100" prop="feesNo">
                        <template #default="scope">
                            <span style="color: rgb(51, 91, 249)">{{ scope.row.feesNo }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :align="'center'" label="总费用" prop="costs" width="110">
                        <template #default="scope">
                              <span class="ys-css">{{
                                      // parseFloat(scope.row.costs - scope.row.refundCharges + "").toFixed(2)
                                      parseFloat(scope.row.costs).toFixed(2)
                                  }}</span>元
                        </template>
                    </el-table-column>
                    <el-table-column :align="'center'" label="应收费用" prop="charges" width="110">
                        <template #default="scope">
                              <span class="ys-css">{{
                                      // parseFloat(scope.row.charges - scope.row.refundCharges + "").toFixed(2)
                                      parseFloat(scope.row.charges).toFixed(2)
                                  }}</span>元
                        </template>
                    </el-table-column>
                    <el-table-column :align="'center'" label="支付方式" prop="moneyType" width="65">
                        <template #default="scope">
                            <el-popover :title="scope.row.name + ' | 收据号' + scope.row.feesNo" :width="270"
                                        placement="right"
                                        trigger="hover">
                                <template #reference>
                                    <el-button type="primary">详情</el-button>
                                </template>
                                <el-descriptions :border="true" :column="1" class="mt5 mr5 mb5 ml5">
                                    <el-descriptions-item v-for="(item, index) in scope.row.paymentsMoneyVoList"
                                                          :key="index"
                                                          min-width="80px">
                                        <template #label>
                                            <div style="display: flex">
                                                <div style="flex: 1">
                                                    <span style="font-weight: bold">{{ item.moneyTypeName }} </span>
                                                </div>
                                            </div>
                                        </template>
                                        <span class="ys-css">{{ parseFloat(item.charges).toFixed(2) }} </span>元
                                    </el-descriptions-item>
                                </el-descriptions>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column :align="'center'" label="缴费标志" prop="chargeFlag" width="130">
                        <template #default="scope">
                            <dict-data-tag :options="dictDataMap['charge_flag_dict']" :value="scope.row.chargeFlag"/>
                        </template>
                    </el-table-column>
                    <el-table-column :align="'center'" :show-overflow-tooltip="true" label="收款人" prop="operationUserName" width="70"/>
                    <el-table-column :align="'center'" label="退费号" prop="refundedFeesNo" width="100"/>
                    <el-table-column :align="'center'" :show-overflow-tooltip="true" label="退费人" prop="refundedPersonName" width="80"/>
<!--                    <el-table-column :align="'left'" label="退费金额" prop="refundCharges" width="110">-->
<!--                        <template #default="scope">-->
<!--                                <span class="ret-ys-css">{{-->
<!--                                        parseFloat(scope.row.refundCharges + "").toFixed(2)-->
<!--                                    }}</span>元-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column :align="'center'" label="结账号" prop="acctNo" width="65"/>
                    <el-table-column :align="'center'" class-name="small-padding fixed-width" fixed="right" label="操作"
                                     width="45">
                        <template #default="scope">
                            <template v-if="scope.row.chargeFlag === '2' || scope.row.chargeFlag === '7'">
                                <el-tooltip class="item" content="退费申请" effect="dark" placement="left">
                                    <el-button circle type="warning"
                                               @click="refundApplicationFun(scope.row, '3', 'all')">
                                        <svg-icon icon-class="refundApplication"/>
                                    </el-button>
                                </el-tooltip>
                            </template>
                            <template v-else-if="scope.row.chargeFlag === '3'">
                                <el-tooltip class="item" content="撤销退费" effect="dark" placement="left">
                                    <el-button circle type="danger"
                                               @click="refundApplicationFun(scope.row, '2', 'all')">
                                        <svg-icon icon-class="refundApplication"/>
                                    </el-button>
                                </el-tooltip>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum"
                            :total="total" @pagination="getList"/>
                <!-- </div> -->
            </el-col>
            <el-col :span="10">
                <el-button  style="float: right" type="primary" @click="getList">
                    <template #icon>
                        <i-ep-search/>
                    </template>
                    刷新
                </el-button>
                <clinic-item-refunds ref="clinicItemRefundsRef" @get-list="refreshList"/>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import clinicItemRefunds from "./clinicItemRefunds.vue";
import {refundApplication, selectPageOutpFeesMaster,} from "@/api/finance/outpFeesMaster.ts";

import {useDictStoreHook} from "@/store/modules/dict";
import {useUserStoreHook} from "@/store/modules/user";

const useUserStore = useUserStoreHook();
const dictStore = useDictStoreHook();
const {proxy} = getCurrentInstance() as any;
const clinicId = ref(proxy.$clinicId);
const patientId = ref(proxy.$patientId);
const clinicItemRefundsRef = ref();
const total = ref(0);
const outpFeesMasterList = ref<any>([]);
const clickRowInfo = ref<OutpFeesMaster>({});
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const date = proxy.$parseTime(new Date(), "{y}-{m}-{d} ");
const dictDataMap = ref(
    dictStore.isTypeGetData("charge_flag_dict", "sys_yes_no", "bill_item_class_dict")
);
const queryParams = ref<OutpFeesMaster>({
    pageNum: 1,
    pageSize: 10,
    name: "",
    clinicId: clinicId.value,
    patientId: patientId.value,
    orgId: userInfo.orgId,
});

/** 查询表集合 */
function getList() {
    selectPageOutpFeesMaster(queryParams.value).then((response: any) => {
        outpFeesMasterList.value = response.rows;
        total.value = response.total;
    });
}

getList();

function refundApplicationFun(row, chargeFlag, type) {
    const typeLabel = chargeFlag === "2" ? "[撤销退费申请]" : "[退费申请]";
    const message = "确定要进行" + typeLabel + "操作吗";
    ElMessageBox.confirm(message, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            refundApplication(row.feesNo, chargeFlag, type, userInfo.orgId, row.feesNo).then(
                () => {
                    ElMessage.success("操作成功")
                    refreshList();
                }
            );
        })
        .catch(() => {
            ElMessage.info("取消操作");
        });
}

/** 收费主记录行击事件加载收费明细 */
function rowClick(row: OutpFeesMaster) {
    clickRowInfo.value = row;
    rowClickOk();
}

function rowClickOk() {
    clinicItemRefundsRef.value.initTableData(clickRowInfo.value);
}

function refreshList() {
    getList();
    rowClickOk();
}

function shuxin() {
    getList();
    clinicItemRefundsRef.value.emptyApplyList();
}
defineExpose({
    shuxin
})
</script>

<style scoped>
.app-container {
    padding: 8px 0px 10px 0px;
}
</style>
